<template>
	<view class="container">
		<uv-navbar title="发布素材" bg-color="none" @leftClick="leftClick"></uv-navbar>
		<view class="coupon-box">
			<uv-textarea v-model="value" placeholder="请输入点评文案" border="none" height="400rpx" count
				maxlength="800"></uv-textarea>
			<view class="image-list">
				<view class="upload" v-if="imageList.length < 9">
					<view class="upload-box" @tap.stop.prevent="upload">
						<image class="upload-image" src="/static/images/index/tu1.png" mode=""></image>
						<view class="upload-text">上传照片</view>
					</view>
				</view>
				<view class="image-item" v-for="(item,index) in imageList" :key="index"
					@tap.stop.prevent="previewImage(index)">
					<image :src="item" mode="aspectFill"></image>
					<view class="xuanz" @tap.stop.prevent="selectIndex(index)">
						<uv-icon name="minus-circle" color="#000" size="20"></uv-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="button-fb" @tap.stop.prevent="nextStep">保存提交</view>
	</view>
</template>

<script>
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	const app = getApp();
	import {
		commentInfo,
	} from '@/common/api.js'
	import siteinfo from "siteinfo.js";
	export default {
		data() {
			return {
				value: '',
				imageList: [],
			};
		},
		methods: {
			leftClick() {
				app.navigateBack()
			},

			previewImage(index) {
				uni.previewImage({
					current: this.imageList[index],
					showmenu: true,
					urls: this.imageList
				})
			},
			selectIndex(index) {
				this.imageList.splice(index, 1)
			},
			upload() {
				uni.chooseImage({
					count: 9,
					sourceType: ['album', 'camera'],
					success: (resolve) => {
						uni.showLoading({
							title: '上传中...'
						});
						console.log(resolve);
						// let tempFilePaths = resolve.tempFilePaths[0];
						resolve.tempFilePaths.forEach(item => {
							const baseURL = siteinfo.siteroot;
							const uploadTask = uni.uploadFile({
								url: baseURL + '/system/oss/upload', //上传接口地址
								filePath: item,
								name: 'file',
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data)
									// console.log(data.data.url);
									this.imageList.push(data.data.url)
									uni.hideLoading();
								},
							});
						})
					}
				})
			},
			nextStep() {
				if (!this.value) {
					uni.showModal({
						title: '提示',
						content: '请输入点评文案',
						showCancel: false
					})
					return false
				}
				if (this.imageList.length <= 0) {
					uni.showModal({
						title: '提示',
						content: '请上传图片',
						showCancel: false
					})
					return false
				}
				uni.showLoading({
					title: '上传中...'
				});
				commentInfo({
					commentUrl: JSON.stringify(this.imageList),
					commentContent: this.value
				}).then(res => {
					app.navigationTo('pages/material/material')
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		width: 100vw;
		padding: 42rpx;
		padding-top: 206rpx;
		box-sizing: border-box;
		padding-bottom: calc(96rpx + 32rpx + 42rpx);
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);

		.button-fb {
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 480rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 200rpx;
		}

		.coupon-box {
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 40rpx;
			box-sizing: border-box;
		}

		.image-list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			margin-top: 32rpx;

			.upload {
				width: calc(100% / 3 - 10rpx - 4rpx);
				padding-top: calc(100% / 3 - 10rpx - 4rpx);
				height: 0;
				position: relative;
				background: radial-gradient(128% 128% at 122% -42%, rgba(215, 206, 255, 0.3) 0%, rgba(187, 225, 255, 0.3) 63%, rgba(241, 245, 248, 0.4) 96%);
				border: 2rpx solid #FFFFFF;
				border-radius: 32rpx;
				flex-shrink: 0;
				margin-bottom: 10rpx;
				margin-right: 10rpx;

				.upload-box {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 32rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.upload-image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 20rpx;
				}

				.upload-text {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 44rpx;
					text-align: center;
				}
			}

			.image-item {
				width: calc(100% / 3 - 10rpx);
				padding-top: calc(100% / 3 - 10rpx);
				height: 0;
				flex-shrink: 0;
				position: relative;
				margin-bottom: 10rpx;
				margin-right: 10rpx;

				.video {
					position: absolute;
					left: calc(50% - 79rpx / 2);
					top: calc(50% - 73rpx / 2);
					display: flex;
					align-items: center;
					justify-content: center;
					width: 79rpx;
					height: 73rpx;
					background: rgba(216, 216, 216, 0.4);
					border-radius: 50%;
				}

				.xuanz {
					position: absolute;
					top: 10rpx;
					right: 12rpx;

					&.active-icon {
						color: #4635FF;
					}
				}

				image {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 32rpx;
				}

				.delete {
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
					background: rgba(0, 0, 0, .2);
					z-index: 2;
				}
			}
		}
	}
</style>